<template>
	<view class="container">
		<navbar ref="navbar" :scrollTop="scrollTop"></navbar>
		<view class="main">
			<!-- 用户信息 -->
			<user-info></user-info>
			<view class="main-data">
				<!-- 券包 -->
				<!-- <coupon :couponList="couponList" v-if="couponList.length > 0"></coupon> -->
				<!-- 积分入口 -->
				<integration></integration>
				<!-- 金额信息 -->
				<!-- <money></money> -->
				<!-- 客服 -->
				<customer></customer>
				<!-- 订单信息 -->
				<order :orderTotal="orderTotal" @tabsChange="tabsChange"></order>
				<!-- 跨境订单 -->
				<crossBorderOrder></crossBorderOrder>
				<!-- 分销 -->
				<distribution></distribution>
				<!-- 工具 -->
				<tool @gotoOrderList="gotoOrderList"></tool>
				<!-- 轮播图 -->
				<!-- <banner :bannerList="bannerList"></banner> -->
			</view>
			<view class="recommend">
				<guess-recommend :guessRecommendBottom="70"></guess-recommend>
			</view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<liu-add-tips tips='点击「添加小程序」，下次访问更便捷' :duration='10' @change='checked' color='#000000'></liu-add-tips>
		<!-- #endif -->
		<customer-service-suspension></customer-service-suspension>
		<tabbar></tabbar>
	</view>
</template>
<script>
	const shopPlugin = require('../../static/shopPlugin/api.js')
	import {
		mapState,
		mapActions
	} from 'vuex'
	import navbar from './components/index/navbar.vue'
	import userInfo from './components/index/user-info.vue'
	// import money from './components/index/money.vue'
	import order from './components/index/order.vue'
	import crossBorderOrder from './components/index/crossBorderOrder.vue'
	import distribution from './components/index/distribution.vue'
	import tool from './components/index/tool.vue'
	import banner from './components/index/banner.vue'
	import coupon from './components/index/coupon.vue'
	// 添加小程序指引
	import liuAddTips from '@/components/liu-add-tips/liu-add-tips.vue'
	import customer from './components/index/customer.vue'
	import integration from './components/index/integration.vue'
	export default {
		components: {
			navbar,
			userInfo,
			// money,
			order,
			distribution,
			tool,
			banner,
			liuAddTips,
			crossBorderOrder,
			coupon,
			customer,
			integration
		},
		data() {
			return {
				bannerList: [],
				statusBarHeight: 0, // 状态栏高度
				scrollTop: 0, //滚动的高度
				is_scrollTop: false, //顶部导航栏显示/隐藏
				headerHeight: 0,
				tabsIndex: 0
			}
		},
		async onLoad(e) {
			// app隐藏tabbar需要在页面中进行
			uni.hideTabBar({
				success: () => {},
				fail: (ex) => {
					console.log(ex)
					// 捕获报错，防止没有tabbar页面调用后控制台报错
				}
			});
			await this.$onLaunched;
			// 状态栏高度
			this.statusBarHeight = this.$getSystemInfo('statusBarHeight') + 20;
			// #ifdef MP-WEIXIN
			// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
			const custom = wx.getMenuButtonBoundingClientRect()
			this.headerHeight = custom.top + custom.height;
			if (e.parent_id) {
				uni.setStorageSync('parent_id', e.parent_id)
			}
			// #endif
			this.getIntegralProductList()
		},
		async onShow() {
			await this.$onLaunched;
			if (this.isLogin) {
				this.getUserInfo();
			}
		},
		watch: {
			tabsIndex(newVal) {
				if (newVal == 1) {
					this.getOrderTotal(newVal)
				}
			}
		},
		computed: {
			...mapState({
				isLogin: state => state.user.isLogin,
				orderTotal: state => state.user.orderTotal,
				userInfo: state => state.user.userInfo,
			})
		},
		methods: {
			...mapActions('user', ['getUserInfo', 'getIntegralProductList', 'getOrderTotal']),
			// 滚动之后显示账户名
			onPageScroll(e) {
				// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
				this.scrollTop = e.scrollTop;
				if (this.scrollTop > 10) {
					this.is_scrollTop = true
				} else {
					this.is_scrollTop = false
				}
			},
			// 小程序添加指引点击事件
			checked() {
				console.log('点击了')
			},
			gotoOrderList() {
				// shopPlugin.gotoOrderList()
				shopPlugin.gotoProdAll()
				shopPlugin.gotoTabIndex()
			},
			// 订单tab点击
			tabsChange(index) {
				this.tabsIndex = index
			}
		},
		onShareAppMessage() {
			const id = this.userInfo.id || ''
			return {
				path: `/pages/user/index?parent_id=${id}`
			};
		},
		// 分享到朋友圈
		onShareTimeline: function(res) {
			return this.$onShareTimeline()
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #F9F9F9;
	}

	.main {
		width: 100%;
		padding-bottom: 150rpx;

		.main-data {
			width: 100%;
			padding: 0 28rpx;
			box-sizing: border-box;
			margin-top: 30rpx;
		}

		.recommend {
			padding: 0 28rpx;
			box-sizing: border-box;
		}
	}
</style>